<template>
  <div ref="refChart" :style="{ height: kHOne + 'px'}"></div>
</template>

<script>
import theme from '../assets/theme/theme'
import {getComplexJson} from '../api'

export default {
  name: 'ChartOne',
  inject: ['getMyData'],
  computed: {
    myData() {
      return this.getMyData().chartOne;
    }
  },
  data() {
    return {
      chartInstance: null,
      allData: [],
      kHOne: null,
      // 屏幕自适应定时器
      screenTimer: null,
      // 数据刷新定时器
      dataTimer: null,
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  beforeMount() {
    this.kHOne = Math.round(this.screenHeight * 0.44)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    this.resizeScreen();
    // 图表初始化
    this.initChart();
    // 获取数据
    this.getData();
    // 屏幕自适应
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
    // 数据刷新定时器
    this.getDataTimer();
  },
  beforeDestroy() {
    // 销毁Echarts图表
    this.chartInstance.dispose();
    this.chartInstance = null;
  },
  destroyed() {
    // 清除自适应屏幕定时器
    clearInterval(this.screenTimer);
    this.screenTimer = null;
    // 清除数据刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 页面大小改变时触发
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.removeEventListener('resize', this.getScreenWidth, false);
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    resizeScreen() {
      this.screenTimer = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      // 四舍五入取整数
      this.kHOne = Math.round(this.screenHeight * 0.44);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    },
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.refChart, theme);
      const initOption = {
        // 标题
        title: {
          text: "银行机构查询情况统计",
          left: 'center'
        },
        // 提示框组件
        tooltip: {
          // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
          trigger: 'item'
        },
        // 图例组件
        legend: {
          // 图例列表布局朝向
          orient: 'vertical',
          // 图例组件离容器左侧的距离
          left: 'top',
          // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
          padding: [50, 20, 50, 20],
          itemHeight: 10,
          itemWidth: 20,
        },
        series: [
          {
            name: '访问次数',
            type: 'pie',
            // 环形图大小
            radius: ['35%', '40%'],
            // 环形图位置 横 纵
            center: ["80%", "70%"],
            // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
            avoidLabelOverlap: true,
            itemStyle: {
              // 用于指定饼图扇形区块的内外圆角半径，支持设置固定数值或者相对于扇形区块的半径的百分比值。
              borderRadius: 2,
              borderColor: '#fff',
              // 描边线宽。为 0 时无描边。
              borderWidth: 1
            },
            // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
            label: {
              show: false,
              // 标签的位置
              position: 'center',
              // 当前百分比
              formatter: '{d}%',
              color: 'green',
              fontStyle: 'oblique'
            },
            // 高亮状态的扇区和标签样式。
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'lighter'
              }
            },
            // 是否显示视觉引导线。
            labelLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                width: 20
              }
            }
          }
        ]
      }
      // 图表初始化配置
      this.chartInstance.setOption(initOption);
    },
    getData() {
      getComplexJson().then(res => {
        const num1 = res.chartOne.num1;
        const num2 = res.chartOne.num2;
        const num3 = res.chartOne.num3;
        const num4 = res.chartOne.num4;
        const num5 = res.chartOne.num5;
        this.allData = [];
        this.allData.push({value: num1, name: '企业基本信息查询'})
        this.allData.push({value: num2, name: '企业变更事项查询'})
        this.allData.push({value: num3, name: '自然人关联信息查询'})
        this.allData.push({value: num4, name: '企业股东信息查询'})
        this.allData.push({value: num5, name: '企业税务征收信息查询'})
        this.allData.push({value: num5, name: '批量基本信息查询'})
        this.allData.push({value: num5, name: '批量自然人关联信息查询'})
        this.allData.push({value: num5, name: '批量股东信息查询'})
        this.allData.push({value: num5, name: '批量变更事项查询'})
        this.allData.push({value: num5, name: '批量欠税公告信息查询'})
        // 处理图表需要的数据
        const dataOption = {
          series: [
            {
              data: this.allData
            }
          ]
        }
        // 图表数据变化配置
        this.chartInstance.setOption(dataOption);
      })
    },
    screenAdapter() {
      this.titleFontSize = (this.$refs.refChart.offsetWidth / 100) * 1.8;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 1.5),
          },
        },
        // 圆点分类标题
        legend: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 1.5),
          },
        }
      };
      // 图标自适应变化配置
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
        // 执行刷新数据的方法
        this.getData();
      }, 5000)
    }
  }
}
</script>
